BinAST

or

Brisons le mur du chargement JS !

David Teller (Yoric), Mozilla, Tech Lead

Un projet

  • Mozilla
  • Facebook
  • Bloomberg
  • CloudFlare

Sur le web, la vitesse compte

  • (sans blague !)
  • DoubleClick : sur mobile, si le chargmenet dure 3+ secondes, 53% des visites sont abandonnées
  • Addy Osmani : en médiane, le TTI dure 8 secondes sur fixe, 16 secondes sur mobile

Quel est le problème?

  • Du code.
  • Beaucoup de code.
  • Et vous, vous avez combien de code ?
  • Le code vous ralentit.
  • … même si vous ne l’utilisez pas !

Parsing

Comment JavaScript démarre

On met du code…

En optimisant…

Et le code natif ?

Parlons de BinAST

  • JavaScript
  • Binary
  • Abstract
  • Syntax
  • Tree

Pas de panique !

Parsons plus vite

Au-delà de IIFE

Le parseur est lent…

  • Les Tokens, c’est compliqué.
  • Les Chaînes de caractères, c’est compliqué.
  • Les clôtures, c’est compliqué.
  • eval.
  • SyntaxError.

Du coup…

  • Simplifions les Tokens et les Chaînes.
  • Gérons eval, SyntaxError, les clôtures en amont.

Au lieu de ça

Enregistrons ça

Résultat

  • Parser + analyse statique: durée -30%.
  • C’est pas fini :)

Téléchargeons plus vite

Au-delà de la minification

  • Les chaînes, les noms… se répètent.
  • Des répétitions entre bibliothèques.
  • Le code a des motifs !

Du coup, apprenons…

  • Dictionnaires de chaînes, noms…
  • Dictionnaires de code.
  • Un dictionnaire par site web.
  • => ~1.2 bits/nÅ“ud.
  • => ~2-6 bits/chaîne, nom…

Résultat

  • Avec un bon dictionnaire, ~minification + brotli.
  • Sans minification.
  • C’est pas fini :)

Compilons plus vite

Au lieu de ça…

…enregistrons ça

…du coup

  • …ne {parsons, compilons} que ce dont nous avons besoin.
  • …{parsons, compilons, exécutons} avant d’avoir reçu tout le fichier.
  • Oui, nous parlons bien de streaming de JavaScript.

Résultats (labo)

  • Parser: durée -75% (*).
  • Compiler: ~se fait en parallèle (*).

(*) À confirmer.

Conclusions

Résultats

  • Le démarrage du JavaScript est un goulot d’étranglement.
  • Nous pouvons le résoudre !
  • Sans changer le code.
  • Sans changer le langage.
  • Moins de travail pour l’ordinateur !

Montrez-moi le code !

  • WIP.
  • https://github.com/binast
  • Firefox Nightly (caché derrière une préférence)
  • Slides: https://yoric.github.io/Numendo-2019
  • Bientôt sur un navigateur & et un serveur près de chez vous :)

Contributeurs bienvenus !

  • https://github.com/binast